<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Rank's HTML document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />  
    <meta http-equiv="Cache-Control" content="no-cache" />     
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="ImageToolbar" content="no" />
	<link href="../../../apps/assets/base.css" rel="stylesheet" type="text/css" media="screen">
	<link href="assets/panel.css" rel="stylesheet" type="text/css" media="screen">
	<script type="text/javascript" src="../../../apps/core_dom_youa.js"></script>
	<script type="text/javascript" src="../panel.js"></script>
	<style type="text/css">
		body{margin-bottom:3em;margin-top:1em;}
		pre{text-align:left;padding-left:3em;font-family:Courier New;border:1px solid #F9F1B0;border-left:10px solid #F5EB89;}
		h1{font-weight:bold;margin-bottom:1em}
		h2{font-weight:bold;margin-bottom:.5em;margin-top:1em;}
		button{margin-top:1em}
	</style>
  </head>
  <body>
  <div id="doc2" class="bb-sc">
	<h1>MessageBox 类</h1>
	<h2>MessageBox 静态方法示例{alert和confirm方法}</h2>
	<p><button onclick="QW.MessageBox.alert({ icon:QW.MB_ICON.SUCCESS, caption:'这是个示例的messagebox', content:'如果您的浏览器3秒内没有自动跳转，请点击这里' });">alert</button>&nbsp;&nbsp;<button onclick="QW.MessageBox.confirm({  caption:'这是个示例的messagebox', content:'如果您的浏览器3秒内没有自动跳转，请点击这里' });">confirm</button>
<pre>
MessageBox.alert({ 
	icon:MB_ICON.SUCCESS, 
	caption:'这是个示例的messagebox',
	content:'如果您的浏览器3秒内没有自动跳转，请点击这里' 
});
MessageBox.confirm({ 
	caption:'这是个示例的messagebox', 
	content:'如果您的浏览器3秒内没有自动跳转，请点击这里' 
});
</pre>
	<h2>代码示例</h2>
	<pre>
new MessageBox({ 
	caption: '这是个示例的messagebox',
	content: '如果您的浏览器3秒内没有自动跳转，请点击<a href="#">这里</a>',
	icon: MB_ICON.SUCCESS,
	buttons: [MB_BUTTON.OK, MB_BUTTON.CANCEL:],
	focusButton: MB_BUTTON.OK
	modal: true,
	lazyShow: false,
	onclose: function(e) {
		alert(e.retVal);
	}
});
</pre>

	<h2>MB_ICON 常量</h2>
  <pre>
var MB_ICON = {
	WARNING: 'bb-confirm-warning',
	SUCCESS: 'bb-confirm-success',
	FAILURE: 'bb-confirm-failure',
	NULL: 'bb-confirm-null'
};
</pre>
	<h2>MB_BUTTON 常量</h2>
<pre>
var MB_BUTTON = {
	OK:     { key: 'OK'    , text: '确定', retVal: 1 },
	CANCEL: { key: 'CANCEL', text: '取消', retVal: 2 },
	ABORT:  { key: 'ABORT' , text: '放弃', retVal: 3 },
	RETRY:  { key: 'RETRY' , text: '重试', retVal: 4 },
	IGNORE: { key: 'IGNORE', text: '忽略', retVal: 5 },
	YES:    { key: 'YES'   , text: '&nbsp;是&nbsp;'  , retVal: 6 },
	NO:     { key: 'NO'    , text: '&nbsp;否&nbsp;'  , retVal: 7 }
};
</pre>


	<h2>icon样式</h2>
	<p>
		<input type="radio" checked value="MB_ICON.WARNING" id="MB_ICON.WARNING" name="icon">
		<label for="MB_ICON.WARNING">MB_ICON.WARNING</label>

		<input type="radio" value="MB_ICON.SUCCESS" id="MB_ICON.SUCCESS" name="icon">
		<label for="MB_ICON.SUCCESS">MB_ICON.SUCCESS</label>

		<input type="radio" value="MB_ICON.FAILURE" id="MB_ICON.FAILURE" name="icon">
		<label for="MB_ICON.FAILURE">MB_ICON.FAILURE</label>

	</p>


	<h2>button样式</h2>
	<p>
		<input type="checkbox" value="MB_BUTTON.YES" id="MB_BUTTON.YES" name="btn">
		<label for="MB_BUTTON.YES">MB_BUTTON.YES</label>

		<input type="checkbox" value="MB_BUTTON.IGNORE" id="MB_BUTTON.IGNORE" name="btn">
		<label for="MB_BUTTON.IGNORE">MB_BUTTON.IGNORE</label>

		<input type="checkbox" value="MB_BUTTON.NO" id="MB_BUTTON.NO" name="btn">
		<label for="MB_BUTTON.NO">MB_BUTTON.NO</label>

		<input type="checkbox" checked value="MB_BUTTON.OK" id="MB_BUTTON.OK" name="btn">
		<label for="MB_BUTTON.OK">MB_BUTTON.OK</label><br>

		<input type="checkbox" value="MB_BUTTON.RETRY" id="MB_BUTTON.RETRY" name="btn">
		<label for="MB_BUTTON.RETRY">MB_BUTTON.RETRY</label>

		<input type="checkbox" value="MB_BUTTON.CANCEL" id="MB_BUTTON.CANCEL" name="btn">
		<label for="MB_BUTTON.CANCEL">MB_BUTTON.CANCEL</label>

		<input type="checkbox" value="MB_BUTTON.ABORT" id="MB_BUTTON.ABORT" name="btn">
		<label for="MB_BUTTON.ABORT">MB_BUTTON.ABORT</label>
	</p>

	<h2>focus button</h2>
	<p>
		<input type="radio" value="MB_BUTTON.YES" id="def_MB_BUTTON.YES" name="defaultBtn">
		<label for="def_MB_BUTTON.YES">MB_BUTTON.YES</label>

		<input type="radio" value="MB_BUTTON.IGNORE" id="def_MB_BUTTON.IGNORE" name="defaultBtn">
		<label for="def_MB_BUTTON.IGNORE">MB_BUTTON.IGNORE</label>

		<input type="radio" value="MB_BUTTON.NO" id="def_MB_BUTTON.NO" name="defaultBtn">
		<label for="def_MB_BUTTON.NO">MB_BUTTON.NO</label>

		<input type="radio" checked value="MB_BUTTON.OK" id="def_MB_BUTTON.OK" name="defaultBtn">
		<label for="def_MB_BUTTON.OK">MB_BUTTON.OK</label><br>

		<input type="radio" value="MB_BUTTON.RETRY" id="def_MB_BUTTON.RETRY" name="defaultBtn">
		<label for="def_MB_BUTTON.RETRY">MB_BUTTON.RETRY</label>

		<input type="radio" value="MB_BUTTON.CANCEL" id="def_MB_BUTTON.CANCEL" name="defaultBtn">
		<label for="def_MB_BUTTON.CANCEL">MB_BUTTON.CANCEL</label>

		<input type="radio" value="MB_BUTTON.ABORT" id="def_MB_BUTTON.ABORT" name="defaultBtn">
		<label for="def_MB_BUTTON.ABORT">MB_BUTTON.ABORT</label>
	</p>

	<button onclick="fnBuild()">预览样式</button>
 
  </div>
    <script type="text/javascript">
    //<![CDATA[
		function fnBuild() {
			var elements = null, arr = [], icon = null, defaultBtn = null;

			elements = document.getElementsByName('icon');
			for (var i=0; i<elements.length; i++) {
				if (elements[i].checked) {
					icon = 'QW.' + elements[i].value
				}
			}


			elements = document.getElementsByName('btn');
			for (var i=0; i<elements.length; i++) {
				if (elements[i].checked) {
					arr.push('QW.' + elements[i].value);
				}
			}


			elements = document.getElementsByName('defaultBtn');
			for (var i=0; i<elements.length; i++) {
				if (elements[i].checked) {
					defaultBtn = 'QW.' + elements[i].value
				}
			}


			new QW.MessageBox({ 
				caption: '这是个示例的messagebox',
				content: '如果您的浏览器3秒内没有自动跳转，请点击<a href="#">这里</a>',
				icon: eval(icon),
				buttons: eval('['+arr.join(',')+']'),
				focusButton: eval(defaultBtn),
				onclose: function(e) {
					document.title=(e.retVal);
				}
			});
		};



    //]]>
    </script>
  </body>
</html>